<template>
	<div id="G-loading4" class="comloading" v-show="loadshow">
		<div class="loading-wrap">
			<ul class="loading">
				<li class="load-item load-item1"></li>
				<li class="load-item load-item2"></li>
				<li class="load-item load-item3"></li>
			</ul>
			<p class="loading-title">{{tips}}</p>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
//		props:['title'],
		data(){
			return {
				loadshow: false,
				tips: '录音'
			}
		},
		methods:{
			show: function(){
				this.loadshow = true;
			},
			hide: function(){
				this.loadshow = false;
			}
		}
	}
</script>
<style type="text/css" lang="less" scoped>
	ul,li,p{
		padding: 0;
		margin: 0;
	}
	#G-loading4{
		.loading-wrap{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 140px;
			height: 140px;
			background: #383838;
			border-radius: 3px;
		}

		.loading{
			position: relative;
			width: 100%;
			height: 90px;
			text-align: center;
			.load-item{
				width: 30px;
				height: 30px;
				background-color: #67CF22;
				display: inline-block;
				text-align: center;
				animation: loading 1.4s infinite ease-in-out;
				animation-fill-mode: both;
				border-radius: 50%;
				margin-top: 30px;
			}
			.load-item1{animation-delay: -.32s;}
			.load-item2{animation-delay: -.16s;}
			@keyframes loading {
			  	0%{transform: scale(0.0);} 
				40% {transform: scale(1.0);}
				80%{transform: scale(0);} 
				100%{transform: scale(0);}
			}
		}
		.loading-title{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: white;
			font-size: 18px;
		}
	}
</style>